<template>
  <div class="body">
    <div class="header">
      <div class="title">站级数智收费管理系统</div>
      <div class="shadow">站级数智收费管理系统</div>
      <div class="weather">{{moment().format('YYYY年MM月DD日')}}&nbsp;&nbsp;&nbsp;{{chineseWeekday}}&nbsp;&nbsp;&nbsp;{{moment().format('hh:mm')}}</div>
      <div class="date">
        <!-- 多云转晴&nbsp;&nbsp;&nbsp;10℃ ~ 12℃  -->
        <div class="signout" @click="bindExit"></div>
      </div>
    </div>
    <div class="bg-left"></div>
    <div class="bg-right"></div>
    <div class="info">
      <div class="info-item" @click="bindShowDialog('company','公司排行','allRankList')">
        <img class="info-img" src="../../../assets/images/icon2.png" alt="">
        <div>
          <div class="info-num">{{roadInfo.sort||0}}</div>
          <div class="info-text">总排名</div>
        </div>
      </div>

      <div class="info-item" @click="bindShowDialog('road','路段排名','roadRankList')">
        <img class="info-img" src="../../../assets/images/icon2.png" alt="">
        <div>
          <div class="info-num">{{roadInfo.roadSort||0}}</div>
          <div class="info-text">路段排名</div>
        </div>
      </div>
      <div class="info-item">
        <img class="info-img" src="../../../assets/images/icon3.png" alt="">
        <div>
          <div class="info-num">{{unitConvert(roadInfo.target)||0}}</div>
          <div class="info-text">年度收费目标(万元)</div>
        </div>
      </div>
      <div class="info-item">
        <img class="info-img" src="../../../assets/images/icon4.png" alt="">
        <div>
          <div class="info-num">{{unitConvert(roadInfo.yearTotal)||0}}</div>
          <div class="info-text">完成值(万元)</div>
        </div>
      </div>
      <div class="info-item">
        <img class="info-img" src="../../../assets/images/icon5.png" alt="">
        <div>
          <div class="info-num">{{parseFloat((roadInfo.rate*100).toFixed(2))||0}}</div>
          <div class="info-text">完成率(%)</div>
        </div>
      </div>

    </div>
    <div>
      <div class="full-video" id="id_video" ref="myElement" v-if="isShowFullVideo&&VideoUrl">
        <div class="close" @click="bindCloseVideo">
          <Close style="color:#fff;font-size:26px" />
        </div>
        <VideoPlayer :src="VideoUrl" id="videoPlayer" ref="RefChild" class="video-max" muted />
      </div>

      <div class="narrow-video" @click="bindShowVideo" id="id_video1" ref="myElement1">
        <img class="play-icon" src="../../../assets/images/icon47.png" alt="">
        <img class="full-icon" src="../../../assets/images/icon46.png" alt="">
      </div>

    </div>
    <div class="construction">
      <div class="construction-title" @click.stop="isShowConstruction=!isShowConstruction">专项工程({{jsonDate.zxgc?.length||0}}) <div class="icon">
          <CaretBottom style="color: #FCC55D;" />
        </div>
      </div>

      <div class="table cursor" v-if="isShowConstruction" @click.stop="bindShowDialog('project','专项工程','zxgc')">
        <div class="table-header">
          <div class="text-center" :style="{ flex: item.width }" v-for="(item, index) in constructionColumns" :key="index">
            {{ item.title }}
          </div>
        </div>
        <div class="table-body">
          <swiper :direction="'vertical'" :slidesPerView="2" :modules="modules" :autoplay="{
              delay: 2500,
              disableOnInteraction: false,
            }" style="height:4.7rem">
            <swiper-slide class="table-th" v-for="(row,i) in jsonDate.zxgc" :key="row.title">
              <div class="tr">
                <div class="td" :style="{ flex: col.width  }" v-for="(col, index) in constructionColumns" :key="index">
                  {{row[col.key] }}
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    <div class="center-video" ref="myElementBox">
      <el-carousel class="center-bg" :height="carouselHeight" indicator-position="none">
        <el-carousel-item v-for="item in banner" :key="item">
          <img :src="item" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="gate-left">

      <div class="gate-title margin-bottom">
        <div class="text">重点工作提醒</div>
      </div>
      <div class="table cursor" @click.stop="bindShowDialog('keynote','重点工作提醒','zdgztx')">
        <div class="table-header">
          <div class="text-center" :style="{ flex: item.width }" v-for="(item, index) in columns" :key="index">
            {{ item.title }}
          </div>
        </div>
        <div class="table-body">
          <swiper :direction="'vertical'" :slidesPerView="3" :modules="modules" :autoplay="{
              delay: 2500,
              disableOnInteraction: false,
            }" style="height:6.875rem">
            <swiper-slide class="table-th" v-for="(row,i) in workList" :key="row.title">
              <div class="tr">
                <div class="td" :class="index==0?'serial': ''" :style="{ flex: col.width,color:col.key=='serialNumber'?'#FFCB5B':''  }"
                  v-for="(col, index) in columns" :key="index">
                  {{ col.key=='serial'?(i+1):col.key=='status'?(row[col.key]==1?'已读':'未读'):row[col.key] }}
                </div>
              </div>

            </swiper-slide>
          </swiper>
        </div>
      </div>
      <div class="footer-item">
        <div class="flex-title ">
          <div class="gate-title">
            <div class="text">工作亮点分享</div>
          </div>
          <!-- <div class="tab">
            <div :class="gateTab==1?'active':''" @click="bindChangeDate(1,'gateTab')">本站</div>
            <div :class="gateTab==2?'active':''" @click="bindChangeDate(2,'gateTab')">全部</div>
          </div> -->
        </div>
        <div class="light" v-scrollList="2000" v-if="lightList">
          <div class="light-item" v-for="(item,index) in lightList" :key="item" @click.stop="bindShowDialogDetails(index)">
            <!-- <img class="light-img" :src="item.proof" alt=""> -->
            <image-preview class="light-img" :src="item.proof" />
            <div>
              <div class="light-title">
                {{item.content}}
              </div>
              <!-- <div class="light-date">2020-12-25 06:12</div> -->
            </div>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据" :image-size="55" />
        </div>
      </div>
      <div class="left-top">
        <div class="gate-title">
          <div class="text">收费人员配置</div>
        </div>

        <div class="top-statistics">
          <div class="statistics-item" @click.stop="bindShowDialog('duty','在岗总人数','sfrypz')">
            <div class="statistics-num">{{jsonDate.sfrypz?.zrs||0}}</div>
            <div>总人数(人)</div>
          </div>
          <div class="statistics-item">
            <div class="statistics-num">{{jsonDate.sfrypz?.zgrs||0}}</div>
            <div>在岗人数(人)</div>
          </div>
          <div class="statistics-item">
            <div class="statistics-num">{{jsonDate.sfrypz?.zbzz||""}}</div>
            <div>值班站长</div>
          </div>
        </div>
      </div>
      <div class="left-center">
        <div class="gate-title">
          <div class="text">车道配置及开启</div>
        </div>
        <div class="lane" @click="bindLink('coordination/lane')">
          <div class="lane-item">
            <div class="lane-title"><img src="../../../assets/images/icon10.png" alt="">车道数</div>
            <div class="lane-opt">
              <span>入口</span>
              <span class="opt-num"><span class="text-white">{{lineInfo?.cdsrk||0}}</span></span>
            </div>
            <div class="lane-opt">
              <span>出口</span>
              <span class="opt-num"><span class="text-white">{{lineInfo?.cdsck||0}}</span></span>
            </div>
          </div>

          <div class="lane-item">
            <div class="lane-title"><img src="../../../assets/images/icon11.png" alt="">今日开放车道</div>
            <div class="lane-opt">
              <span>入口</span>
              <span class="opt-num">{{lineInfo?.jrkfcdrk||0}}</span>
            </div>
            <div class="lane-opt">
              <span>出口</span>
              <span class="opt-num">{{lineInfo?.jrkfcdck||0}}</span>
            </div>
          </div>

          <div class="lane-item">
            <div class="lane-title"><img src="../../../assets/images/icon12.png" alt="">今日开放人工车道</div>
            <div class="lane-opt">
              <span>入口</span>
              <span class="opt-num">{{lineInfo?.jrkfrgcdrk||0}}</span>
            </div>
            <div class="lane-opt">
              <span>出口</span>
              <span class="opt-num">{{lineInfo?.jrkfrgcdck||0}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="left-new-bottom">
        <div class="gate-title">
          <div class="text">节假日政策执行</div>
        </div>

        <div class="holiday">
          <div class="flex">
            <div class="flex-item" @click.stop="bindShowDialog('holiday','节假日政策执行','jjrzczx','cj')">
              <div><img src="../../../assets/images/icon37.png" alt=""></div>
              <div>
                <div class="holiday-text">春节减免金额</div>
                <div class="holiday-num">{{holidayInfo?.spring||0}}<span>元</span> </div>
              </div>

            </div>
            <div class="flex-item" @click.stop="bindShowDialog('holiday','节假日政策执行','jjrzczx','qm')">
              <div><img src="../../../assets/images/icon38.png" alt=""></div>
              <div>
                <div class="holiday-text">清明节减免金额</div>
                <div class="holiday-num">{{holidayInfo?.bright||0}}<span>元</span></div>

              </div>
            </div>

          </div>
          <div class="flex">
            <div class="flex-item" @click.stop="bindShowDialog('holiday','节假日政策执行','jjrzczx','ld')">
              <div><img src="../../../assets/images/icon39.png" alt=""></div>
              <div>
                <div class="holiday-text">劳动节减免金额</div>
                <div class="holiday-num">{{holidayInfo?.labour||0}}<span>元</span></div>

              </div>
            </div>
            <div class="flex-item" @click.stop="bindShowDialog('holiday','节假日政策执行','jjrzczx','gq')">
              <div><img src="../../../assets/images/icon40.png" alt=""></div>
              <div>
                <div class="holiday-text">国庆节减免金额</div>
                <div class="holiday-num">{{holidayInfo?.nationa||0}}<span>元</span></div>

              </div>
            </div>
          </div>

        </div>
      </div>

    </div>

    <div class="gate-right">
      <div class="station">{{route.query.deptName?route.query.deptName:greenInfo.deptName}} <span class="icon">
          <CaretBottom style="color: #fff;" />
        </span>
      </div>
      <div class="right-top">
        <div class="gate-title">
          <div class="text">通行费量情况</div>
        </div>
        <div class="flex fee">
          <div class="flex-item" @click="bindShowDialog('yesterday','昨日通行费量','txfl')">
            <div class="fee-top">
              <img src="../../../assets/images/icon20.png" alt="">
              <div>
                <div class="fee-title">昨日通行费(元)</div>
                <div class="fee-num">{{yesterFeeNum||0}}</div>
              </div>
            </div>
            <!-- <div class="fee-bottom">
              交控内排名 {{feeSort}}
            </div> -->
            <!-- <div class="fee-bottom">
              同比 <span class="red">-6.53% </span>
              环比 <span class="green">1.06%</span>
            </div> -->
          </div>
          <div class="flex-item" @click="bindShowDialog('yesterday','昨日通行费量','txfl')">
            <div class="fee-top">
              <img src="../../../assets/images/icon23.png" alt="">
              <div>
                <div class="fee-title">昨日通行量(辆)</div>
                <div class="fee-num">{{yesterNum||0}}</div>
              </div>
            </div>
            <!-- <div class="fee-bottom">
              交控内排名 {{numSort}}
            </div> -->
            <!-- <div class="fee-bottom">
              同比 <span class="red">-7.21%</span>
              环比 <span class="green">-5.50%</span>
            </div> -->
          </div>
        </div>

        <div class="trend">
          <div class="flex ">
            <div class="trend-title">通行费量增减趋势</div>
            <div class="tab">
              <div :class="trendTab==1?'active':''" @click="bindChangeDate(1,'trendTab')">本月</div>
              <!-- <div :class="trendTab==2?'active':''" @click="bindChangeDate(2,'trendTab')">本季</div>-->
              <div :class="trendTab==3?'active':''" @click="bindChangeDate(3,'trendTab')">本年</div>
            </div>
          </div>
          <div>
            <LineEchert v-if="echartsData.series[0].data1.length" :echartsData="echartsData" />
          </div>
          <div v-if="echartsData.series[0].data1.length==0" style="height: 8.5rem;"></div>

        </div>

        <div class="over">
          <div class="gate-title">
            <div class="text">绿通政策执行</div>
          </div>
          <div class="flex" @click="bindShowDialog('green','绿通政策执行','lvzczx')">
            <div class="flex-item">
              <div class="over-num">{{greenInfo.greenNum||0}}<span>辆</span></div>
              <div class="over-title">昨日绿通放行车次</div>
            </div>
            <div class="flex-item">
              <div class="over-num">{{greenInfo.greenFee||0}}<span>元</span></div>
              <div class="over-title">昨日绿通减免金额</div>
            </div>
            <div class="flex-item">
              <div class="over-num">{{greenInfo.yearTotal||0}}<span>元</span></div>
              <div class="over-title">年度累计绿通减免金额</div>
            </div>
          </div>
        </div>

      </div>

      <div class="right-center tabflex">
        <div class="flex ">
          <div class="gate-title">
            <div class="text">收费稽核</div>
          </div>
          <!-- <div class="tab">
            <div :class="feeTab==1?'active':''" @click="bindChangeDate(1,'feeTab')">当日</div>
            <div :class="feeTab==2?'active':''" @click="bindChangeDate(2,'feeTab')">昨日</div>
          </div> -->
        </div>
        <div class="flex check" @click="bindLink('/audit/over')">
          <div class="flex-item">
            <img src="../../../assets//images/icon26.png" alt="">
          </div>
          <div class="flex-item">
            <div class="check-num">{{numberToCurrencyNo(auditInfo.gdTotal)}}</div>
            <div class="check-title">总工单量</div>
          </div>
          <div class="flex-item">
            <div class="check-num">{{numberToCurrencyNo(auditInfo.wcCount)}}</div>
            <div class="check-title">完成量</div>
          </div>
          <div class="flex-item">
            <div class="check-num">{{Number(auditInfo.wcRate)}}<span>%</span></div>
            <div class="check-title">完成率</div>
          </div>
        </div>
        <div class="flex chase">
          <div class="flex-item">
            <div class="chase-num">{{auditInfo.dzptTotal||0}}</div>
            <div class="chase-title">对账业务平台</div>
          </div>
          <div class="flex-item">
            <div class="chase-num">{{auditInfo.bjzjTotal||0}}</div>
            <div class="chase-title">部级稽核业务平台</div>
          </div>
          <div class="flex-item">
            <div class="chase-num">{{auditInfo.jhfxTotal||0}}</div>
            <div class="chase-title">稽核分析系统</div>
          </div>
        </div>
        <!-- <div class="flex chase">
          <div class="flex-item">
            <div class="chase-num">263</div>
            <div class="chase-title">违规车辆数</div>
          </div>
          <div class="flex-item">
            <div class="chase-num">{{numberToCurrencyNo(2125.00)}}</div>
            <div class="chase-title">追缴金额</div>
          </div>
          <div class="flex-item">
            <div class="chase-num">{{auditInfo.jrsnhmdCount}}</div>
            <div class="chase-title">加入黑名单</div>
          </div>
          <div class="flex-item">
            <div class="chase-num">{{auditInfo.zbjzjCount}}</div>
            <div class="chase-title">转入省级追缴</div>
          </div>
        </div> -->

      </div>

      <div class="right-bottom tabflex">

        <div class="flex ">
          <div class="gate-title">
            <div class="text">超限超载检测</div>
          </div>
          <!-- <div class="tab">
            <div :class="limitTab==1?'active':''" @click="bindChangeDate(1,'limitTab')">当日</div>
            <div :class="limitTab==2?'active':''" @click="bindChangeDate(2,'limitTab')">昨日</div>
          </div> -->
        </div>
        <div class="limit" @click="bindShowDialog('limit','超限超载检测','cxczjc')">
          <div class="flex">
            <div class="flex-item">
              <div class="limit-num">{{numberToCurrencyNo(jsonDate.cxczjc?.jcclzs)}}</div>
              <div>检测车辆总数</div>
            </div>
            <div class="flex-item">
              <div class="limit-num">{{jsonDate.cxczjc?.jccxcl||0}}</div>
              <div>检测超限车辆</div>
            </div>
            <div class="flex-item">
              <div class="limit-num">{{numberToCurrencyNo(jsonDate.cxczjc?.jcdjyscc)}}</div>
              <div>检测大件运输车次</div>
            </div>
          </div>

        </div>
      </div>

    </div>

    <div class="gate-footer">
      <div class="footer-item">
        <div class="gate-title">
          <div class="text">安全应急</div>
        </div>
        <div class="footer-flex">
          <div class="footer-item" :class="securityTab==1?'active':''" @click="bindChangeDate(1,'securityTab')">
            <div class="footer-num">{{jsonDate.aqyj?.zz}}</div>
            <div class="footer-text">组织</div>
          </div>
          <div class="footer-item" :class="securityTab==2?'active':''" @click="bindChangeDate(2,'securityTab')">
            <div class="footer-num">{{jsonDate.aqyj?.ya}}</div>
            <div class="footer-text">预案</div>
          </div>
          <div class="footer-item" :class="securityTab==3?'active':''" @click="bindChangeDate(3,'securityTab')">
            <div class="footer-num">{{jsonDate.aqyj?.dw}}</div>
            <div class="footer-text">队伍</div>
          </div>
        </div>

        <div class="table cursor"
          @click.stop="bindShowDialog(securityTab==1?'organization':securityTab==2?'reserve':'ranks','安全应急','aqyj',securityTab==1?'zztc':securityTab==2?'yatc':'dwtc')">
          <div class="table-header">
            <div class="text-center" :style="{ flex:item.flex }"
              v-for="(item,index) in securityTab==1?config.organizationColumns2:securityTab==2?config.reserveColumns2:config.ranksColumns2" :key="index">
              {{item.title}}
            </div>
          </div>
          <div class="table-body" v-if="jsonDate.aqyj">
            <swiper :direction="'vertical'" :slidesPerView="2" :modules="modules" :autoplay="{
              delay: 2500,
              disableOnInteraction: false,
            }" style="height:4.7rem">
              <swiper-slide class="table-th" v-for="(row,i) in securityTab==1?jsonDate.aqyj.zztc:securityTab==2?jsonDate.aqyj.yatc:jsonDate.aqyj.dwtc"
                :key="row.title">
                <div class="tr">
                  <!-- @click.stop="previewFun(row.yawj)" -->
                  <div class="td" :class="index==0?'serial': ''" :style="{ flex: col.flex }"
                    v-for="(col, index) in securityTab==1?config.organizationColumns2:securityTab==2?config.reserveColumns2:config.ranksColumns2" :key="index">
                    {{ col.key=='serial'?(i+1):row[col.key] }}
                  </div>
                </div>

              </swiper-slide>
            </swiper>
          </div>
          <div v-else class="text-tips">
            暂无数据
          </div>
        </div>

      </div>
      <div class="footer-item">
        <div class="gate-title margin-bottom">
          <div class="text">收费机电</div>
        </div>
        <div class="footer-flex">
          <div class="footer-item" :class="electricTab==1?'active':''" @click="bindChangeDate(1,'electricTab')">
            <div class="footer-num">{{jsonDate.jdwxgd?.num}}</div>
            <div class="footer-text">维修工单</div>
          </div>
          <div class="footer-item" :class="electricTab==2?'active':''" @click="bindChangeDate(2,'electricTab')">
            <div class="footer-num">228</div>
            <div class="footer-text">巡检工单</div>
          </div>
          <div class="footer-item" :class="electricTab==3?'active':''" @click="bindChangeDate(3,'electricTab')">
            <div class="footer-num">20</div>
            <div class="footer-text">保养工单</div>
          </div>
        </div>

        <div class="table cursor"
          @click.stop="bindShowDialog(electricTab==1?'repair':electricTab==2?'inspection':'maintain','收费机电','sfjd',electricTab==1?'jdwxgd':securityTab==2?'xjgd':'bygd')">
          <div class="table-header">
            <div class="text-center" :style="{ flex: 2}">
              {{electricTab==1?'故障级别':electricTab==2?'巡检周期':'养护周期'}}
            </div>
            <div class="text-center" :style="{ flex: 2}">
              {{electricTab==1?'工单数量':electricTab==2?'巡检次数':'养护次数'}}
            </div>
            <div class="text-center" :style="{ flex: 2 }">
              {{electricTab==1?'完成数量':electricTab==2?'巡检完成次数':'养护完成次数'}}
            </div>
          </div>
          <div class="table-body" v-if="jsonDate.jdwxgd">
            <swiper :direction="'vertical'" :slidesPerView="2" :modules="modules" :autoplay="{
              delay: 2500,
              disableOnInteraction: false,
            }" style="height:4.7rem">
              <swiper-slide class="table-th" v-for="(row,i) in  electricTab==1?jsonDate.jdwxgd.tc:electricTab==2?feeDataSource2:feeDataSource3"
                :key="row.title">
                <div class="tr">
                  <div class="td" :style="{ flex: col.width,color:col.key=='serialNumber'?'#FFCB5B':'' }"
                    v-for="(col, index) in electricTab==1?config.feeColumns:config.feeColumns2" :key="index">
                    {{ row[col.key] }}
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>

      </div>

    </div>

    <div class="bottom"></div>

  </div>

  <!-- 弹窗 -->
  <el-dialog v-model="dialogVisible" :title="title" width="1200" class="screen-dialog" ref="fileArea">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <div class="header-title">{{title}}</div>
      </div>
    </template>
    <div class="dialogCon" v-if="!isDetails">
      <el-radio-group v-model="holidayTab" size="large" v-if="checkTableName=='holiday'" @change="handleClick" style="margin-bottom: 15px;">
        <el-radio-button label="1">春节</el-radio-button>
        <el-radio-button label="2">清明</el-radio-button>
        <el-radio-button label="3">五一</el-radio-button>
        <el-radio-button label="4">国庆</el-radio-button>
      </el-radio-group>
      <!-- <search :data="goOutSearch" :queryParams="queryParams" @getList="getList" @delQuery="delQuery" @handleQuery="handleQuery" v-if="goOutSearch.length" /> -->
      <Custable :content="tableContent" :list="tableData" :queryParams="queryParams" :total="total" @getList="getList"></Custable>
    </div>
    <div class="flexLight" v-if="isDetails">
      <div class="img"><image-preview class="light-img" :src="selectLightDetails.proof" /></div>
      <div class="content">{{selectLightDetails.summary}}</div>
    </div>
  </el-dialog>
  <Viewer ref="fileViewerRef" :dialog-doc="dialogDoc" />
</template>

<script setup>
import '../../../utils/rem.js'
import moment from 'moment'
import LineEchert from "../components/lineEchert.vue";
import { useTransition } from '@vueuse/core'
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
// import videoSrc from '@/assets/videonew/bg.mp4'
import config from './config'
import search from "@/components/Custom/search";
import Custable from "@/components/Custom/Custable";
import Viewer from "@/components/Custom/viewer.vue";
import VideoPlayer from "@/components/Custom/HLSvideo";

import { getVideoUrl, getLaneInfo, getStationStat, getPassageTendency, getYesterPassage, gstStationRank, getHoliday,getYesterdayPassageDetail } from '@/api/charge/gate'
import { statementList, stationAgricultural } from "@/api/charge/ticket";
import { listIntro, getIntro, delIntro, addIntro, updateIntro } from "@/api/coordination/intro";
import { listLightspot } from "@/api/coordination/lightspot";
import { listMajorImpl } from "@/api/coordination/work";
import { getIntroInfoJson } from "@/api/charge/gate";
import { getCKInfo } from '@/utils/auth'

import useUserStore from '@/store/modules/user'
import { ref } from 'vue';

const getAssetsFile = (url, type) => {
  return new URL(`../../../assets/${type == 1 ? 'json' : 'images'}/${url}`, import.meta.url).href;
};

const route = useRoute();
const router = useRouter();
const userStore = useUserStore()

const numSort = ref()
const feeSort = ref()
const yesterNum = ref();
const yesterFeeNum = ref();
const tendencyData = ref()
const roadInfo = ref({})
const holidayInfo = ref()
const greenInfo = ref({})
const RefChild = ref()
const yesterdayList=ref([])

let modules = [Autoplay];
const banner = ref([getAssetsFile('banner1.png')])
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const chineseWeekday = weekdays[moment().format('d')];
const echartsData = ref({
  series: [{
    data1: [],
    data2: [],
  }],
  xaxis: []
})

const scrollFlag = ref(true)
const list = ref([{}, {}, {}, {}, {}, {}, {}, {}])
const columns = ref(config.columns);
// 
const feeColumns = ref(config.feeColumns);
const organizationBottomColumns = ref(config.organizationBottomColumns);
const constructionColumns = ref(config.constructionColumns)
const title = ref()
const queryParams = ref({ pageNum: 1, pageSize: 10 })
const tableContent = ref([])
const tableData = ref()
const goOutSearch = ref()
const dialogVisible = ref(false)
let dialogDoc = ref(false);
const baseUrl = import.meta.env.VITE_APP_BASE_API;

const dataSource = ref([
  {
    serial: "1",
    locationName: "治超",
    deviceName: "暂无数据",
    serialNumber: "待上报",
    status: "20",
  },
  {
    serial: "2",
    locationName: "票证",
    deviceName: "暂无数据",
    serialNumber: "待上报",
    status: "20",
  },
  {
    serial: "3",
    locationName: "治超",
    deviceName: "暂无数据",
    serialNumber: "待上报",
    status: "20",
  },
  {
    serial: "4",
    locationName: "票证",
    deviceName: "暂无数据",
    serialNumber: "待上报",
    status: "20",
  },
  {
    serial: "5",
    locationName: "治超",
    deviceName: "暂无数据",
    serialNumber: "待上报",
    status: "20",
  },
  {
    serial: "6",
    locationName: "票证",
    deviceName: "暂无数据",
    serialNumber: "待上报",
    status: "20",
  },
]);
const feeDataSource2 = ref([
  {
    serial: "日",
    locationName: "211",
    deviceName: "201",
  },
  {
    serial: "周",
    locationName: "16",
    deviceName: "16",
  },
  {
    serial: "季",
    locationName: "1",
    deviceName: "0",
  },])
const feeDataSource3 = ref([
  {
    serial: "日",
    locationName: "16",
    deviceName: "15",
  },
  {
    serial: "周",
    locationName: "3",
    deviceName: "3",
  },
  {
    serial: "季",
    locationName: "1",
    deviceName: "1",
  },])

let TCPlayerVideo = null;
const gateTab = ref(1)
const feeTab = ref(1)
const trendTab = ref(1)
const limitTab = ref(1)
const securityTab = ref(1)
const electricTab = ref(1)
const postTab = ref('draw')
const holidayTab = ref('1')
const deptId = ref(Number(getCKInfo('deptId')))
const myElement = ref(null);
const myElement1 = ref(null);
const VideoUrl = ref()
const carouselHeight = ref()
const myElementBox = ref(null);
const isShowConstruction = ref(false)
const isShowFullVideo = ref(false)
const checkTableName = ref('')
const auditInfo = ref({ wcRate: 0 })
const lineInfo = ref()
const isDetails = ref(false)
const selectLightDetails = ref({})
const fileViewerRef = ref()
const workList = ref([])
const jsonDate = ref({ gzldfx: [] })
const road = ref()
const lightList = ref([])

// 统计值特效
const source = ref(0)
const outputValue = useTransition(source, {
  duration: 500,
})
source.value = 89, 452.36


const getList = () => {

  getVideoUrl({ id: deptId.value }).then(res => {
    if (res.code == 200 && res.data && res.data.VideoUrl) {
      VideoUrl.value = res.data.VideoUrl;
    } else {
      VideoUrl.value = ''
    }
  })
}
const bindCloseVideo = () => {
  isShowFullVideo.value = false;
  videoPause()
}
const videoPause = () => {
  RefChild.value.bindClose()
}
const bindShowVideo = () => {
  isShowFullVideo.value = true;
}

const bindChangeDate = (val, name) => {
  if (name == 'gateTab') {
    gateTab.value = val;
  } else if (name == 'feeTab') {
    feeTab.value = val;
  } else if (name == 'trendTab') {
    trendTab.value = val;
    if (val == 1) {
      echartsData.value.series[0].data1 = tendencyData.value.month.fee
      echartsData.value.series[0].data2 = tendencyData.value.month.num
      echartsData.value.xaxis = tendencyData.value.month.date
    } else {
      echartsData.value.series[0].data1 = tendencyData.value.year.fee
      echartsData.value.series[0].data2 = tendencyData.value.year.num
      echartsData.value.xaxis = tendencyData.value.year.date
    }
  } else if (name == 'limitTab') {
    limitTab.value = val;
  } else if (name == 'securityTab') {
    securityTab.value = val;
  } else if (name == 'electricTab') {
    electricTab.value = val;
  }
}
const bindExit = () => {
  router.go(-1);
}
const abilitySort = (arr, property, desc) => {
  return arr.sort(function (a, b) {
    const val1 = a[property];
    const val2 = b[property];
    if (desc) {
      return val1 - val2; // 升序排列
    } else {
      return val2 - val1; // 降序排列
    }
  });
}
const numberToCurrencyNo = (value, num) => {
  if (!value) return 0
  // 获取整数部分
  const intPart = Math.trunc(value)
  // 整数部分处理，增加,
  const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  // 预定义小数部分
  let floatPart = ''
  // 将数值截取为小数部分和整数部分
  const valueArray = value.toString().split('.')
  if (valueArray.length === 2) { // 有小数部分
    floatPart = valueArray[1].toString() // 取得小数部分
    return intPartFormat + '.' + floatPart
  }
  let newNumber = intPartFormat + floatPart
  return num ? newNumber + '.00' : newNumber
}

const getIntroInfo = (id) => {
  getIntro(id).then(response => {
    if (response.code == 200 && response.data && response.data.stationImg) {
      let arr = response.data.stationImg.split(",")
      if (arr && arr.length) {
        banner.value = []
        arr.forEach(item => {
          banner.value.push(import.meta.env.VITE_APP_BASE_API + item)
        })
      }

    }

  });
}


/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
const delQuery = () => {
  queryParams.value = { pageNum: 1, pageSize: 10, };
}
const bindShowDialog = (name, h1, table, chailder) => {
  isDetails.value = false;
  title.value = h1;
  checkTableName.value = name;
  if (name == 'company' || name == 'road') {
    tableData.value = jsonDate.value[table];
  } else if (name == 'holiday' || table == 'jjrzczx') {
    holidayTab.value = chailder == 'cj' ? 1 : chailder == 'qm' ? 2 : chailder == 'wi' ? 3 : 4
    holidayList(holidayTab.value)
  } else if (name == 'keynote') {
    tableData.value = workList.value;
  }else if (name == 'yesterday') {
    tableData.value =yesterdayList.value;
  }   else if (name == 'green') {
    stationAgricultural({ ticketName: '运输鲜活农产品车辆日报表', startDate: moment().startOf('month').format('YYYY-MM-DD'), endDate: moment().endOf('month').format('YYYY-MM-DD'), deptId: deptId.value, pageNum: 1, pageSize: 50 }).then(res => {
      if (res.code == 200) {
        tableData.value = res.rows;
      }
    })
  } else {
    queryParams.value = { pageNum: 1, pageSize: 10 }
    tableData.value = chailder ? jsonDate.value[table][chailder] : jsonDate.value[table].tc ? jsonDate.value[table].tc : jsonDate.value[table]
  }


  tableContent.value = config[name + 'Columns']
  dialogVisible.value = true;

}
const bindShowDialogDetails = (index) => {
  title.value = '工作亮点分享'
  isDetails.value = true;
  dialogVisible.value = true;
  selectLightDetails.value = lightList.value[index];


  // selectLightDetails.value = jsonDate.value.gzldfx[index];
  // selectLightDetails.value.src=getAssetsFile(,1)
}

const bindLink = (path) => {
  router.push(path);
}
const handleClick = (val) => {
  bindShowDialog('holiday', '节假日政策执行', 'jjrzczx', val == 1 ? 'cj' : val == 2 ? 'qm' : val == 3 ? 'wi' : 'gq')
  // holidayList(val)
}
const holidayList = (holidayType) => {
  statementList({ deptId: deptId.value, holidayType: holidayType }).then(res => {
    if (res.code == 200) {
      tableData.value = res.data
    }
  })
}
const getAudit = () => {
  let startDate = moment().subtract(1, 'days').format("YYYY-MM-DD")
  getStationStat({ date: startDate, deptId: deptId.value }).then(res => {
    if (res.code == 200) {
      auditInfo.value = res.data
    }
  })
}
function unitConvert(num) {
  var moneyUnits = ["元", "万元", "亿元", "万亿"]
  var dividend = 10000;
  var curentNum = num;
  //转换数字
  var curentUnit = moneyUnits[0];
  //转换单位
  curentUnit = moneyUnits[1]
  curentNum = curentNum / dividend
  var m = { num: 0, unit: "" }
  m.num = curentNum.toFixed(2)
  m.unit = curentUnit;
  return m.num == 'NaN' ? 0 : m.num;
}
// 排行信息
const gstCoordinationListInit = () => {
  gstStationRank({ deptId: deptId.value }).then(res => {
    if (res.code == 200) {
      roadInfo.value = { ...res.data.dept, ...{ roadSort: res.data.roadSort } }
      jsonDate.value.roadRankList = res.data.roadRank;
      jsonDate.value.allRankList = res.data.rank;
    }
  })
}
// 折线图
const getTendencyNumInit = () => {
  getPassageTendency({ deptId: deptId.value, }).then(res => {
    if (res.code == 200) {
      tendencyData.value = res.data;
      echartsData.value.series[0].data1 = res.data.month.fee
      echartsData.value.series[0].data2 = res.data.month.num
      echartsData.value.xaxis = res.data.month.date
    }
  })
}
// 昨日通行费量
const getYesterNumInit = () => {
  getYesterPassage({ deptId: deptId.value }).then(res => {
    if (res.code == 200) {
      yesterNum.value = res.data.num;
      yesterFeeNum.value = res.data.fee;
      numSort.value = res.data.numSort;
      feeSort.value = res.data.feeSort;
      greenInfo.value = res.data
    }
  })
}
//节假日

const getHolidayList = () => {
  getHoliday({ deptId: deptId.value }).then(res => {
    if (res.code == 200) {
      holidayInfo.value = res.data;
    }
  })
}
const getIntroDetails = () => {
  getIntroInfoJson({ stationId: deptId.value }).then(res => {
    if (res.code == 200 && res.rows && res.rows.length && res.rows[0].remark) {
      jsonDate.value = JSON.parse(res.rows[0].remark)

      jsonDate.value.aqyj.yatc.forEach(item => {
        const arr = item.yawj.split(".");
        const suffix = arr[arr.length - 1];
        item.fileName = "应急预案." + suffix
      })


      jsonDate.value.gzldfx.forEach(item => {
        item.img = getAssetsFile(item.img, 1)
      })
      jsonDate.value.sfjd = { jdwxgd: jsonDate.value.jdwxgd.tc, xjgd: feeDataSource2.value, bygd: feeDataSource3.value }
      // jsonDate.value.road = { tc: [] }
      // jsonDate.value.road.tc = jsonDate.value.title.tc.filter(item => item.luduan.indexOf(road.value) != -1)
      let tc = abilitySort(jsonDate.value.title.tc, "gspm", true)
      jsonDate.value.title.tc = tc
      // if (jsonDate.value.jjrzczx) {
      //   jsonDate.value.jjrzczx.cj = []
      //   jsonDate.value.jjrzczx.qm = []
      //   jsonDate.value.jjrzczx.wi = []
      //   jsonDate.value.jjrzczx.gq = []
      //   jsonDate.value.jjrzczx.tc.forEach(item => {
      //     if (item.type == '春节') {
      //       jsonDate.value.jjrzczx.cj.push(item)
      //     } else if (item.type == '清明') {
      //       jsonDate.value.jjrzczx.qm.push(item)
      //     } else if (item.type == '五一') {
      //       jsonDate.value.jjrzczx.wi.push(item)
      //     } else if (item.type == '国庆') {
      //       jsonDate.value.jjrzczx.gq.push(item)
      //     }
      //   })

      // }
      jsonDate.value.lvzczx.drlvjmje = jsonDate.value.lvzczx.tc[jsonDate.value.lvzczx.tc.length - 2].fee








    }
    // else {
    //   echartsData.value = {
    //     series: [{
    //       data1: [34555.43, 34118.51, 34260.19, 34601.7, 30341.82, 31250.08, 27365.87, 145222.98, 152550.03, 162428.94, 141807.61, 134555.8, 134489.03, 135582.93, 137019.2], data2: [355, 322, 352, 363, 322, 330, 320, 3437, 3344,
    //         3469, 3368, 3462, 3172, 3365, 3180]
    //     }]
    //   }

    // }
  })
}
const getLine = () => {
  getLaneInfo({ id: deptId.value }).then(res => {
    if (res.code == 200) {
      lineInfo.value = res.data
    }
  })
}

const getLightList = () => {
  // 工作亮点分享
  listLightspot({ pageNum: 1, pageSize: 999, deptId: deptId.value }).then(res => {
    if (res.code == 200) {
      lightList.value = res.rows;
    }
  })
}
const getWork = () => {
  // 重点工作
  listMajorImpl({ pageNum: 1, pageSize: 999, deptId: deptId.value }).then(res => {
    if (res.code == 200) {
      workList.value = res.rows;
    }
  })
}
const getYestodyData=()=>{
  getYesterdayPassageDetail({deptId: deptId.value}).then(res=>{
    // console.log(555,res)
    yesterdayList.value=res.data
  })
}

const init = () => {
  if (route.query.deptId) {
    deptId.value = route.query.deptId;
    road.value = route.query.road ? route.query.road.slice(0, 2) : "";
  } else {
    deptId.value = Number(getCKInfo('deptId'))
  }
  getList()
  getIntroInfo(deptId.value)
  getAudit()
  getTendencyNumInit()//通行费量增减趋势
  getYesterNumInit() //昨日通行费量
  gstCoordinationListInit()//排行信息
  getHolidayList()//节假日
  getLightList()//亮点
  getWork()//重点工作
  getYestodyData()
}



init()

getIntroDetails()
getLine()



onMounted(() => {
  carouselHeight.value = myElementBox.value.offsetHeight * 0.85 + 'px';
});
onUnmounted(() => {

});
// 监听画面变化
window.addEventListener("resize", () => {

});


</script>

<style>
.el-dialog.screen-dialog {
  height: 37.5rem;
  background: url(../../../assets/images/icon57.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.el-dialog.screen-dialog .el-table {
  background: #0c3b7e;
  --el-table-border-color: rgba(52, 96, 153, 0.5);
}
.el-dialog.screen-dialog .el-table .el-table__row {
  background: #0c3b7e;
}

.el-dialog.screen-dialog .el-table .el-table__header-wrapper th {
  background: #0c3b7e !important;
  color: #fff;
  border: 1px solid rgba(52, 96, 153, 0.5);
}
.el-dialog.screen-dialog .pagination-container {
  background: transparent;
}
.el-dialog.screen-dialog .el-select .el-input__wrapper {
  background: #0b397f;
  border: 1px solid #2c97f6 !important;
  box-shadow: none !important;
}
.el-dialog.screen-dialog .el-input.el-input--default.el-input--suffix {
  border-color: #2c97f6 !important;
  box-shadow: 0 0 0 0.0625rem var(#2c97f6, #2c97f6) inset !important;
}

.el-dialog.screen-dialog .el-form .el-form-item__label {
  color: #fff !important;
}
.el-dialog.screen-dialog .el-dialog__headerbtn {
  top: -5px !important;
}
.el-dialog.screen-dialog .el-icon.el-dialog__close {
  color: #fff !important;
  font-size: 20px !important;
}
.el-dialog.screen-dialog .el-table__body-wrapper tr:hover > td {
  background-color: rgba(250, 248, 248, 0.226) !important;
}
.el-dialog.screen-dialog
  .el-table--enable-row-transition
  .el-table__body
  td.el-table__cell {
  color: #fff;
}
</style>

<style scoped lang="scss">
.body {
  height: calc(100vw * 0.56);
  background-color: #0a45a6;
  position: relative;
  overflow: hidden;
  transform-origin: left top;
  transform: scale(1);
}
.header {
  width: 100vw;
  height: 6.25rem;
  background: url(../../../assets/images/header.png) no-repeat 0 0;
  background-size: 100% 100%;
  position: relative;

  .title {
    letter-spacing: 0.2rem;
    font-family: "CustomFont";
    font-size: 3rem;
    text-align: center;
    background-image: linear-gradient(
      to top,
      #8defec 0%,
      #f6fff4 62%,
      #ffffff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  .shadow {
    color: #084205;
    letter-spacing: 0.2rem;
    font-family: "CustomFont";
    font-size: 3rem;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    z-index: 0;
    text-shadow: 5px 0px 10px #17498b;
  }
  .weather {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #fff;
    position: absolute;
    left: 2rem;
    bottom: 1.5rem;
  }
  .date {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #fff;
    position: absolute;
    right: 2rem;
    bottom: 1.25rem;

    .signout {
      width: 2rem;
      height: 2rem;
      background: url(../../../assets/images/icon1.png) no-repeat 0 0;
      background-size: 100% auto;
      margin-left: 1.75rem;
    }
  }
}
.bg-left {
  width: 1.375rem;
  height: 59.9375rem;
  position: fixed;
  left: 0;
  top: 6.25rem;
  background: url(../../../assets/images/left.png) no-repeat 0 0;
  background-size: 100% auto;
}
.bg-right {
  width: 1.375rem;
  height: 59.9375rem;
  position: fixed;
  right: 0;
  top: 6.25rem;
  background: url(../../../assets/images/right.png) no-repeat 0 0;
  background-size: 100% auto;
}

.info {
  position: fixed;
  top: 8em;
  left: 49%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 9;

  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .info-img {
      width: 3.4375rem;
      height: 3.4375rem;
      margin: 1.25rem 0.625rem 0;
    }
    .info-num {
      font-family: "CustomFont";
      font-size: 1.875rem;
      color: #fff;
      text-shadow: 2px 0px 13px #fff;
      line-height: 1;
    }
    .info-text {
      font-family: Microsoft YaHei;
      color: #ccefec;
      font-size: 1rem;
    }
  }
}
.center-video {
  width: 100vw;
  height: calc(100vw * 0.46);
  video {
    width: 100%;
    height: 100%;
  }
  .center-bg {
    width: 100vw;
    height: calc(100vw * 0.46);
    text-align: center;
    position: relative;
    // &::after {
    //     /* 【主要代码】 */
    //     position: absolute;
    //     content: '';
    //     width: 77%;
    //     height: 86%;
    //     top: 0;
    //     left: 50%;
    //     transform: translateX(-50%);
    //     border-radius: 100px; /* 避免四个角没有阴影 */
    //     box-shadow: 0 0 7.75rem 13rem #132126 inset; /* 【主要代码】 */
    //   }
    img {
      height: 100%;
    }
    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background: url(../../../assets/images/banner.png) no-repeat 0 0;
      background-size: 100% 100%;
      top: 0;
      left: 0;
      z-index: 1;
    }
  }
}

.gate-left {
  position: fixed;

  right: 2.5rem;
  top: 6.25rem;
  z-index: 1;
}
.gate-title {
  width: 28.0625rem;
  height: 2.375rem;
  color: #fff;
  background: url(../../../assets/images/icon6.png) no-repeat 0 0;
  background-size: 100% 100%;
  padding-left: 2.25rem;
  .text {
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    line-height: 2.5rem;
    background-image: linear-gradient(
      to top,
      #95efed 0%,
      #f6fff4 62%,
      #ffffff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.full-video {
  width: 100vw;
  height: 100%;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  video {
    width: 100%;
    height: 100%;
  }
  .close {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 99;
  }
}
.narrow-video {
  position: fixed;
  right: 30rem;
  bottom: 18rem;
  width: 11.375rem;
  height: 7.625rem;
  background: #000;
  border-radius: 4px;
  border: 1px solid #98edff;
  overflow: hidden;
  margin: 0.3125rem 1.875rem 0.5rem;
  z-index: 9;
  video {
    height: 100%;
  }
  .play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .full-icon {
    position: absolute;
    right: 5px;
    bottom: 5px;
  }
}
.construction {
  position: fixed;
  left: 32rem;
  top: 13.8125rem;
  z-index: 9;
  .construction-title {
    color: #fff;
    width: 27.75rem;
    line-height: 2.125rem;
    background: url(../../../assets/images/icon45.png) no-repeat 0 0;
    background-size: 100% 100%;
    font-size: 1rem;
    padding-left: 1.25rem;
    // margin-bottom: 0.375rem;
    position: relative;
    .icon {
      width: 1rem;
      position: absolute;
      right: 1rem;
      top: 0;
    }
  }
  .table {
    width: 27.75rem;
    padding: 0.375rem;
    height: auto;
    background: url(../../../assets/images/icon48.png) no-repeat 0 0;
    background-size: 100% 100%;
  }
}
.gate-left {
  .left-top {
    margin-bottom: 0.625rem;
    .top-video {
      width: 24.75rem;
      height: 16.5rem;
      border-radius: 4px;
      border: 2px solid #98edff;
      overflow: hidden;
      margin: 0.3125rem 1.875rem 0.5rem;
      video {
        width: 100%;
        height: 100%;
      }
    }
    .top-text {
      width: 28rem;
      font-size: 0.8125rem;
      color: #ccefeb;
      padding-left: 1.25rem;
      line-height: 1.4;
      .more {
        color: #98edff;
      }
    }
    .top-staff {
      width: 27rem;
      display: flex;
      align-items: center;
      padding-left: 1.25rem;
      margin: 0.625rem 0 0.375rem;
      .staff-item {
        flex: 1;
        line-height: 2.25rem;
        margin-right: 0.625rem;
        background: url(../../../assets/images/icon8.png) no-repeat 0 0;
        background-size: 100% 100%;
        padding: 0 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.875rem;
        color: #fff;
        .staff {
          font-weight: 600;
          background-image: linear-gradient(to top, #6ee5ff 0%, #ffffff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .staff-item:last-child {
        margin: 0;
      }
    }

    .top-statistics {
      width: 26.375rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 1.25rem;
      .statistics-item {
        width: 5.8125rem;
        height: 5rem;
        font-size: 0.875rem;
        color: #fff;
        background: url(../../../assets/images/icon7.png) no-repeat 0 0;
        background-size: 100% auto;
        text-align: center;
        .statistics-num {
          font-family: "CustomNumberFont";
          line-height: 1;
          font-size: 1.5rem;
          margin: 0.625rem 0 0.3125rem;
        }
      }
    }
  }
  .left-center {
    .lane {
      display: flex;
      align-items: center;
      color: #fff;
      margin: 0.3125rem 0.9375rem;

      .lane-item {
        flex: 1;
        margin-right: 0.625rem;
        padding: 0.625rem 0 0.625rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: url(../../../assets/images/icon14.png) no-repeat 0 0;
        background-size: 100% 100%;
        .lane-title {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.8rem;
          margin-bottom: 1.125rem;
          img {
            width: 1.25rem;
            margin-right: 5px;
          }
        }
        .lane-opt {
          margin-bottom: 0.625rem;
          .opt-num {
            font-family: "CustomNumberFont";
            margin-left: 1.25rem;
            font-size: 1.25rem;
            color: #6ee5ff;
            .text-white {
              color: #fff;
            }
          }
        }
      }
    }
  }
  .left-bottom {
  }
  .holiday {
    margin-top: 1.25rem;
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 0.875rem;
      .flex-item {
        width: 13.5625rem;
        display: flex;
        align-items: center;
        img {
          width: 55px;
          margin-right: 0.5rem;
        }
        .holiday-num {
          color: #e2ce4a;
          font-size: 1.2rem;
          font-weight: 600;
          span {
            font-size: 0.875rem;
          }
        }
        .holiday-text {
          font-size: 0.875rem;
          color: #fff;
          padding-left: 0.375rem;
          width: 7.25rem;
          line-height: 1.25rem;
          background: url(../../../assets/images/icon41.png) no-repeat 0 0;
          background-size: 5.5625rem 1.25rem;
        }
        &:last-child {
          .holiday-num {
            color: #4ae287;
          }
          .holiday-text {
            background: url(../../../assets/images/icon42.png) no-repeat 0 0;
            background-size: 5.5625rem 1.25rem;
          }
        }
      }
      &:last-child {
        .flex-item {
          .holiday-num {
            color: #37f7f0;
          }
          .holiday-text {
            background: url(../../../assets/images/icon43.png) no-repeat 0 0;
            background-size: 5.5625rem 1.25rem;
          }
          &:last-child {
            .holiday-num {
              color: #ffac28;
            }
            .holiday-text {
              background: url(../../../assets/images/icon44.png) no-repeat 0 0;
              background-size: 5.5625rem 1.25rem;
            }
          }
        }
      }
    }
  }
}

.gate-footer .table {
  width: 27.1875rem;
  height: 6.25rem;
}
.table {
  width: 27.1875rem;
  height: 10.625rem;
  box-sizing: border-box;
  .table-header {
    width: 100%;
    height: 2.125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url(../../../assets/images/icon13.png) no-repeat 0 0;
    background-size: 100% 100%;

    color: #fff;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }
  .table-th {
    .tr {
      height: 2.125rem;
      display: flex;
      align-items: center;
      color: #75ced1;

      background: url(../../../assets/images/icon18.png) no-repeat 0 0;
      background-size: 100% 100%;
      opacity: 0.7;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .serial {
        line-height: 2.125rem;
        background: url(../../../assets/images/icon15.png) no-repeat center
          center;
        background-size: 1.5rem 1.5rem;
        font-size: 1rem;
        color: #75ced1;
      }
    }
  }
  .table-th:nth-child(2n) {
    .tr {
      margin-top: 0.5px;
      background: url(../../../assets/images/icon19.png) no-repeat 0 0;
      background-size: 100% 100%;
      color: #fff;
    }
    .serial {
      background: url(../../../assets/images/icon16.png) no-repeat center center;
      background-size: 1.5rem 1.5rem;
      color: #fff;
    }
  }
  .td {
    font-size: 0.875rem;
    text-align: center;
  }
}

.gate-right {
  width: 28.125rem;
  position: fixed;
  left: 1.875rem;
  top: 6.25rem;
  z-index: 1;
  .station {
    width: 20.5rem;
    line-height: 2.875rem;
    margin-bottom: 0.375rem;
    font-size: 1.5rem;
    font-weight: 600;
    padding-left: 4rem;
    color: #eff7ff;
    background: url(../../../assets/images/icon34.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: relative;
    .icon {
      width: 1.5rem;
      position: absolute;
      top: 0;
      right: 1.5rem;
    }
  }
  .flex {
    display: flex;
    align-items: center;
    .flex-item {
      flex: 1;
      margin-right: 0.75rem;
    }
    .flex-item:last-child {
      margin-right: 0;
    }
  }
  .trend {
    margin: 1rem 0;
  }
  .trend,
  .tabflex {
    .flex {
      justify-content: space-between;

      .tab {
        display: flex;
        align-items: center;
        cursor: pointer;
        div {
          width: 2.75rem;
          line-height: 1.375rem;
          background: url(../../../assets/images/icon21.png) no-repeat 0 0;
          background-size: 100% 100%;
          color: #fff;
          text-align: center;
          font-size: 0.875rem;
          margin-left: 0.625rem;
        }
        div.active {
          background: url(../../../assets/images/icon22.png) no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
    }
  }
  .right-top {
    .trend-title {
      font-size: 1.125rem;
      color: #98edff;
    }
    .fee {
      margin-top: 1rem;
      margin-bottom: 1.25rem;
      .flex-item {
        height: 5.75rem;
        background: url(../../../assets/images/icon17.png) no-repeat 0 0;
        background-size: 100% 100%;
        .fee-top {
          display: flex;
          align-items: center;
          padding: 0.625rem 0.625rem 0.25rem;
          color: #ccefec;
          img {
            width: 1.375rem;
            height: 1.375rem;
            margin-right: 0.625rem;
          }
          .fee-num {
            font-size: 1.5rem;
            font-family: CustomNumberFont;
            margin-top: 0.375rem;
          }
        }
        .fee-bottom {
          display: flex;
          align-items: center;
          color: #ccefec;
          padding: 0 0.3rem;
          font-size: 0.75rem;
          span {
            padding-left: 0.3125rem;
            padding-right: 1rem;
          }
          span.red {
            color: #ff4e4e;
            padding-left: 0.75rem;
            position: relative;
          }
          span.red::before {
            content: "";
            display: block;
            background: url(../../../assets/images/icon25.png) no-repeat 0 0;
            background-size: 100% 100%;
            width: 0.4375rem;
            height: 0.5625rem;
            position: absolute;
            left: 0.25rem;
            top: 50%;
            transform: translateY(-50%);
          }
          span.green {
            color: #98edff;
            padding-left: 0.75rem;
            position: relative;
          }
          span.green::before {
            content: "";
            display: block;
            background: url(../../../assets/images/icon24.png) no-repeat 0 0;
            background-size: 100% 100%;
            width: 0.4375rem;
            height: 0.5625rem;
            position: absolute;
            left: 0.25rem;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }

    .over {
      margin-bottom: 0.98rem;
      .flex-item {
        flex: 1;
        height: 3.75rem;
        background: url(../../../assets/images/icon9.png) no-repeat 0 0;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ccefec;
        font-size: 0.875rem;
        margin-right: 0.625rem;
        margin-top: 0.625rem;
        .over-num {
          font-size: 1.5rem;
          font-family: CustomNumberFont;
          span {
            font-size: 0.875rem;
            color: #c7d9fc;
          }
        }
      }
      .flex-item:last-child {
        flex: 1.2;
        margin-right: 0;
      }
    }
  }
  .right-center {
    .check {
      width: 28.125rem;
      height: 6.25rem;
      background: url(../../../assets/images/icon28.png) no-repeat 0 0;
      background-size: 100% 100%;
      padding: 1rem 1.25rem;
      margin: 0.3125rem 0 0.5625rem;
      .flex-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #ccefec;
        .check-num {
          font-family: CustomNumberFont;
          font-size: 1.5rem;
          color: #fff;
          // font-weight: bold;
          span {
            font-size: 1rem;
            font-weight: 100;
          }
        }
      }
    }
    .chase {
      width: 28.125rem;
      height: 4.375rem;
      background: url(../../../assets/images/icon29.png) no-repeat 0 0;
      background-size: 100% 100%;
      padding: 1rem 1.25rem;
      margin: 0.3125rem 0 0.5625rem;
      .flex-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #ccefec;
        font-size: 0.875rem;
        .chase-num {
          font-family: CustomNumberFont;
          font-size: 1.5rem;
          color: #fff;
          // font-weight: bold;
          span {
            font-size: 1rem;
            font-weight: 100;
          }
        }
      }
    }
  }
  .right-bottom {
    .limit {
      margin-top: 0.875rem;
      .flex-item {
        height: 6.5625rem;
        width: 11.6875rem;
        padding: 1rem 0;
        background: url(../../../assets/images/icon33.png) no-repeat 0 0;
        background-size: 100% 100%;
        font-size: 0.875rem;
        color: #ccefec;
        margin-right: 2.625rem;
        margin-bottom: 1rem;
        position: relative;
        text-align: center;
        .limit-num {
          font-family: CustomNumberFont;
          color: #fff;
          font-size: 1.5rem;
        }
      }
      .flex-item:nth-child(2n) {
        background: url(../../../assets/images/icon32.png) no-repeat 0 0;
        background-size: 100% 100%;
      }
      .flex-item:last-child {
        margin-right: 0;
        position: relative;
        background: url(../../../assets/images/icon31.png) no-repeat 0 0;
        background-size: 100% 100%;
      }
      .flex-item:first-child::before {
        content: "";
        display: block;
        width: 0.625rem;
        height: 0.3125rem;
        background: url(../../../assets/images/icon30.png) no-repeat 0 0;
        background-size: 100% 100%;
        position: absolute;
        right: -1.5rem;
        top: 4.5rem;
      }
      .flex-item:last-child::before {
        content: "";
        display: block;
        width: 0.625rem;
        height: 0.3125rem;
        background: url(../../../assets/images/icon30.png) no-repeat 0 0;
        background-size: 100% 100%;
        position: absolute;
        left: -1.5rem;
        top: 4.5rem;
      }
    }
  }
}
.gate-footer {
  width: 56.25rem;
  height: 14.375rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3rem;
  display: flex;
  justify-content: space-between;
  z-index: 9;
}
.footer-flex {
  display: flex;
  margin: 0.5rem 0 0.625rem;
  .footer-item {
    height: 3.75rem;
    flex: 1;
    margin-right: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../../../assets/images/icon36.png) no-repeat 0 0;
    background-size: 100% 100%;

    &:last-child {
      margin-right: 0;
    }
    .footer-num {
      font-size: 1.5rem;
      color: #fff;
      font-weight: 600;
    }
    .footer-text {
      font-size: 0.875rem;
      color: #fff;
      font-weight: 400;
    }
  }
}
.footer-item.active {
  background: url(../../../assets/images/icon35.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.footer-item {
  width: 27.1875rem;
  .flex-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tab {
      display: flex;
      align-items: center;
      div {
        width: 2.75rem;
        line-height: 1.375rem;
        background: url(../../../assets/images/icon21.png) no-repeat 0 0;
        background-size: 100% 100%;
        color: #fff;
        text-align: center;
        font-size: 0.875rem;
        margin-left: 0.625rem;
      }
      div.active {
        background: url(../../../assets/images/icon22.png) no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
  }
  .list {
    margin-top: 1rem;
    height: 10.625rem;
    overflow-y: auto;
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 2.625rem;
      height: 2.625rem;
      .list-title {
        width: 17.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #fff;
      }
      .list-date {
        color: #bafeff;
      }
    }
  }
  .light {
    margin-top: 1rem;
    margin-bottom: 1.6875rem;
    height: 8.625rem;
    overflow-y: auto;
    .light-item {
      height: 5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.375rem;
      .light-img {
        width: 6.25rem;
        height: 4.125rem;
      }
      .light-title {
        width: 18.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        color: #fff;
        margin-bottom: 0.4rem;
        line-height: 1.6;
      }
      .light-date {
        color: #bafeff;
      }
    }
  }
}
.bottom {
  width: 54.6875rem;
  height: 2.0625rem;
  background: url(../../../assets/images/bottom.png) no-repeat 0 0;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.margin-bottom {
  margin-bottom: 0.625rem;
}

::-webkit-scrollbar {
  display: none !important;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  display: none !important;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  display: none !important;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: transparent !important;
  display: none !important;
}

.header-title {
  color: #fff;
}
.dialogCon {
  height: 500px;
  overflow-y: scroll;
}
.text-tips {
  text-align: center;
  color: #fff;
  padding-top: 20px;
}

.flexLight {
  display: flex;
  // justify-content: space-between;
  .img {
    width: 300px;
    flex-shrink: 0;
    margin-right: 30px;
    img {
      width: 100%;
    }
  }
  .content {
    flex: 1;
    font-size: 16px;
    line-height: 2.6;
    color: #fff;
  }
}

.video-max {
  width: 100vw !important;
  height: 100%;
}
</style>